<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <canvas id="canvas" width="700" height="800" style="border: 1px solid gray"></canvas>
</body>

</html>
<script>
    var cns = document.querySelector('#canvas');
    var context = cns.getContext('2d');

    function Pentastar(context, dx, dy, inr, outr) {

        context.beginPath();

        for (let i = 0; i < 5; i++) {
            // 确定外顶点位置
            context.lineTo(Math.cos((18 + i * 72) * Math.PI / 180) * outr + dx,
                -Math.sin((18 + i * 72) * Math.PI / 180) * outr + dy);
            // 确定内顶点位置
            context.lineTo(Math.cos((54 + i * 72) * Math.PI / 180) * inr + dx,
                -Math.sin((54 + i * 72) * Math.PI / 180) * inr + dy);

        };

        context.closePath();
    }

    Pentastar(context, 80, 80, 25, 50);
    context.stroke();
    
    Pentastar(context, 80, 250, 25, 70);
    context.fillStyle='hotPink';
    context.fill();



</script>